<template>
  <div class="picinfo-container">
    <h3>图片详情</h3>
    <p class="subtitle">
      <span>发表时间：</span>
      <span>点击：</span>
    </p>
    <hr>
    <div class="content">
      <img :src='info.img'>
      <div>
        {{ info.sub }}
      </div>
      
    </div>
    <hr>
    <component-box :id="this.id" :its="this.is"></component-box>
  </div>
</template>
<script>
import content from '../subcomponents/content.vue'
export default {
  data(){
    return {
      id:this.$route.params.id,
      is:1,
      info:{}
    }
  },
  methods:{
    getPicInfo(){
      this.$http.get('home/picinfo/'+this.id).then(result =>{
        if(result.status === 200){
          // this.info = result.body.piclist
          console.log(result.body.piclist)
          for(var i = 0;i<result.body.piclist.length;i++){
            for(var y = 0;y<result.body.piclist[i].neirong.length;y++){
              if(this.id == result.body.piclist[i].neirong[y].id){
                console.log(result.body.piclist[i].neirong[y])
                this.info = result.body.piclist[i].neirong[y]
              }
            }
            
          }
        }
      } )
    }
  },
  components:{
    "component-box":content
  },
  created(){
    this.getPicInfo()
  }

}
</script>
<style lang="scss" scoped>
.picinfo-container{
  padding: 3px;
  h3{
    color:#26a2ff;
    font-size: 15px;
    text-align: center;
    margin:15px 0;
  }
  .subtitle{
      display: flex;
      justify-content: space-between;
      font-size: 13px;
    }
}
.content{
  text-align: center;
  img{
    width: 100%;
    height: 100px;
  }
}
</style>
